/*

@description: 主页样式

@author: 赖赖

@update: 2021年9月5日10:23:11

 */

/* 初始化 */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
    margin: 0;
    padding: 0;
}

header,
footer,
section,
article,
aside,
nav,
hgroup,
address,
figure,
figcaption,
menu,
details {
    display: block;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption,
th {
    text-align: left;
    font-weight: normal;
}

html,
body,
fieldset,
img,
iframe,
abbr {
    border: 0;
}

i,
cite,
em,
var,
address,
dfn {
    font-style: normal;
}

[hidefocus],
summary {
    outline: 0;
}

li {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
small {
    font-size: 100%;
}

sup,
sub {
    font-size: 83%;
}

pre,
code,
kbd,
samp {
    font-family: inherit;
}

q:before,
q:after {
    content: none;
}

textarea {
    overflow: auto;
    resize: none;
}

label,
summary {
    cursor: default;
}

a,
button {
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
b {
    font-weight: bold;
}

del,
ins,
u,
s,
a,
a:hover {
    text-decoration: none;
}

body,
textarea,
input,
button,
select,
keygen,
legend {
    color: #333;
    outline: 0;
}

body {
    background: #fff;
}

a,
a:hover {
    color: #333;
}

//清楚浮动常用格式
.clr::after {
    content: "";
    display: block;
    clear: both;
}

// 全局参数
@width: 1200px;
@color: rgb(34, 38, 50);

//头部
header {
    .drjk {
        //登入接口
        height: 36px;
        background: @color;

        .zk {
            //登入主框
            width: @width;
            height: 100%;
            margin: auto;
            display: flex;
            justify-content: space-between;

            a {
                //字体
                font-size: 12px;
                padding-right: 8px;
                color: rgb(250, 250, 250);
                line-height: 36px;
            }

            a:hover {
                color: rgb(221, 8, 8);
            }
        }
    }

    nav {
        background: rgb(255, 255, 255);

        .dhzk {
            //导航主框
            width: @width;
            height: 100px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
                //图标
                width: 120px;
                height: 60px;
            }

            span {
                font-size: 45px;
                font-weight: 700;
                color: rgb(226, 35, 26);
                font-family: fantasy;
                letter-spacing: 10px;
            }

            .xl {
                //导航下拉栏
                height: 100%;
                display: flex;
                position: relative;

                div {
                    //导航块级样式
                    width: 120px;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 16px;
                    position: relative;


                    p {
                        //下拉框位置初始
                        position: absolute;
                        right: -105px;
                        top: 100px;
                        overflow: hidden;
                        // z-index: 99;

                        a {
                            //服务内容
                            padding: 66px;
                            line-height: 100px;
                        }

                        //字体显示样式
                        a:hover {
                            color: rgb(250, 14, 24);
                        }
                    }
                }

                h1 {
                    // 横线
                    position: absolute;
                    top: 96px;
                    left: 22px;
                    width: 80px;
                    height: 4px;
                    border-radius: 10px;
                    background: rgb(250, 14, 24);
                }

                .sy:hover {
                    //悬浮首页效果
                    color: rgb(250, 250, 250);
                    background: rgb(226, 35, 26);
                }

                .wlfu:hover {
                    //悬浮物流服务效果
                    color: rgb(250, 250, 250);
                    background: rgb(226, 35, 26);
                }

                .wlfu:hover>a {
                    //悬浮物流服务效果
                    color: rgb(250, 250, 250);
                }

                .gywm:hover {
                    //悬浮关于我们效果
                    color: rgb(250, 250, 250);
                    background: rgb(226, 35, 26);
                }

                .wlfu:hover>p {
                    //物流悬浮显示
                    z-index: 999;
                    height: 100px;
                    border-top: 2px solid rgb(222, 225, 230);
                    border-bottom: 2px solid rgb(222, 225, 230);
                }
            }

            div>p {
                //下拉框显示
                width: @width;
                background: rgb(250, 250, 250);
            }
        }
    }

    .lbt {
        //轮播图
        z-index: -99;

        .swiper-container {
            //轮播图窗口
            height: 500px;
            overflow: hidden;

            // .swiper-wrapper{
            //     .swiper-slide{
            //         width: 1920px;
            //     }
            // }
        }

        .swiper-pagination {
            //定位分页器
            position: absolute;
            top: 550px;
        }

        .an {
            //定位按钮
            margin-top: -110px;
        }

        img {
            //图片大小
            width: 1920px;
            height: 500px;
            background-size: 100% 100%;
        }
    }

    form {
        //搜索框+链接
        width: @width;
        height: 90px;
        margin: auto;
        padding: 20px;
        transform: translateY(-50px);
        z-index: 999;
        background: rgb(48, 35, 61);
        border-radius: 8px;
        box-sizing: border-box;
        position: relative;

        textarea {
            //文本输入框
            width: 520px;
            border-radius: 8px;
            padding: 8px;
            font-size: 14px;
            border: 20px solid rgb(48, 35, 61);
            position: absolute;
            left: 0;
            bottom: 0;
        }

        button {
            //查询按钮
            width: 88px;
            height: 40px;
            color: rgb(250, 250, 250);
            font-size: 16px;
            font-weight: 700;
            border-radius: 6px;
            border: none;
            background: rgb(225, 37, 27);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-25%, -50%);
        }

        textarea:focus {
            //点击输入框按钮
            height: 300px;
        }

        .lj {
            //链接
            width: 440px;
            float: right;
            display: flex;
            justify-content: space-around;
            
            h1 {
                //字体
                font-size: 20px;
                color: rgb(250, 250, 250);
                line-height: 45px;
            }

            h1:hover {
                color: rgb(250, 14, 24);
            }
        }
    }
}

//主体
main {
    section {
        //寄件服务
        margin: auto;
        margin-bottom: 100px;

        hgroup {
            //寄件标题
            text-align: center;

            // 寄件服务标题字体
            h1 {
                color: rgb(51, 51, 51);
                font-size: 34px;
                font-weight: 700;
            }

            //标题二级标题
            .h2 {
                color: rgb(102, 102, 102);
                font-size: 18px;
                margin-top: 25px;
            }
        }

        // 服务导航
        nav {
            display: flex;
            justify-content: space-around;
            margin-top: 50px;

            // 服务
            div {
                width: 195px;
                height: 218px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;

                img {
                    //图片
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                }

                h1 {
                    //字体
                    margin-top: 20px;
                    font-size: 18px;
                }
            }

            div:hover {
                //悬浮效果
                color: rgb(221, 8, 8);
                // outline: 5px solid rgba(210, 210, 223, 0.3);
                box-shadow: 0 0 6px 4px rgb(210, 210, 223);
            }
        }
    }

    .qqsj {
        //全球数据
        height: 474px;
        background-image: url("https://www.jdl.cn/_nuxt/img/cover-bg.a0d9f04.jpg");
        background-size: cover;

        .bjt {

            //背景
            header {
                //头部
                width: 1200px;
                height: 71px;
                margin: auto;
                display: flex;
                justify-content: center;
                border-bottom: 1px solid rgb(72, 74, 83);

                ul {
                    width: 300px;
                    display: flex;
                    justify-content: space-between;

                    a {
                        //标题
                        margin-top: 30px;
                        font-size: 28px;
                        text-align: center;
                        color: rgb(250, 250, 250);


                        .fg {
                            //下划线
                            padding-bottom: 8px;
                            border-bottom: 4px solid rgb(225, 37, 27);
                        }
                    }

                    h1:hover {
                        color: rgb(221, 8, 8);
                    }
                }
            }

            .qfg {
                //全球覆盖底部
                width: 1200px;
                margin: auto;
                padding-left: 150px;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                margin-top: 40px;

                .mk {
                    //模块
                    width: 500px;
                    height: 115px;
                    margin: 0;

                    .sz {
                        color: rgb(250, 14, 24);
                        font-size: 50px;
                    }

                    .wz {
                        color: rgb(250, 250, 250);
                    }

                    p {
                        color: #c2c2c5;
                    }
                }
            }

            .qht {
                //全球互通底部
                width: 1200px;
                margin: auto;
                padding-left: 150px;
                display: none;
                justify-content: space-between;
                flex-wrap: wrap;
                margin-top: 40px;

                .mk {
                    //模块
                    width: 500px;
                    height: 115px;
                    margin: 0;

                    .sz {
                        color: rgb(250, 14, 24);
                        font-size: 50px;
                    }

                    .wz {
                        color: rgb(250, 250, 250);
                    }

                    p {
                        color: #c2c2c5;
                    }
                }
            }
        }
    }

    nav {
        //公告资讯
        width: @width;
        margin: auto;
        margin-top: 100px;
        margin-bottom: 100px;

        header {

            //标题头部
            h1 {
                //公告资讯
                font-size: 38px;
                text-align: center;
            }

            h2 {
                //更多
                text-align: right;
            }
        }

        .nr {
            //总文章数
            width: 100%;
            height: 400px;
            margin-top: 45px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            article {
                //文章
                width: 558px;
                height: 150px;
                padding: 10px;
                color: rgb(153, 153, 153);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                box-sizing: border-box;
                

                h1 {
                    //标题
                    color: rgb(0, 0, 0);
                    font-size: 18px;
                    // 文本溢出隐藏
                    /*将对象转为弹性盒模型展示*/
                    display: -webkit-box;
                    /*设置弹性盒模型子元素的排列方式*/
                    -webkit-box-orient: vertical;
                    /*限制文本行数*/
                    -webkit-line-clamp: 1;
                    /*超出隐藏*/
                    overflow: hidden;
                }

                .dnr {
                    line-height: 25px;
                    // 文本溢出隐藏
                    /*将对象转为弹性盒模型展示*/
                    display: -webkit-box;
                    /*设置弹性盒模型子元素的排列方式*/
                    -webkit-box-orient: vertical;
                    /*限制文本行数*/
                    -webkit-line-clamp: 2;
                    /*超出隐藏*/
                    overflow: hidden;
                }
            }

            article:hover {
                //悬浮效果框
                box-shadow: 0 0 6px 4px rgb(210, 210, 223);
                // outline: 3px solid rgba(210, 210, 223, 0.3);
            }
        }
    }
}

//底部
footer {
    height: 180px;
    background: @color;

    .zt {
        //底部主体
        width: @width;
        margin: auto;
        padding-top: 40px;
        display: flex;
        justify-content: space-between;

        img {
            //图片
            width: 170px;
            height: 86px;
        }

        nav {
            //分栏            height: 104px;

            .bslj{
                text-align: center;
                a {
                    //字体
                    margin: 20px 0;
                    color: rgb(250, 250, 250);
                    font-size: 14px;
                }
    
                a:hover {
                    color: rgb(221, 8, 8);
                }
    
                span {
                    //横杠
                    font-size: 16px;
                    color: rgb(250, 250, 250);
                    padding: 20px 10px;
                }
            }

            .bq {
                //版权
                font-size: 14px;
                margin-top: 40px;
                color: rgb(144, 148, 148);

                .h {
                    //链接字体
                    color: rgb(144, 148, 148);
                }
            }

            .w {
                //公安网
                margin-top: 8px;
                text-align: center;

                a {
                    //公安网字体
                    color: rgb(144, 148, 148);
                }
            }
        }

        .lxfs{
            .lxtp{
                width: 170px;
                height: 111px;
                background-size: cover;
            }
        }
    }
}

aside {
    //侧边栏
    width: 50px;
    height: 88px;
    background: @color;
    color: rgb(250, 250, 250);
    text-align: center;
    line-height: 88px;
    position: fixed;
    right: 0;
    bottom: 210px;
    font-size: 16px;
}